<!--
 * @Author: wangjianwhy wangjianwhy@sina.com
 * @Date: 2024-10-22 15:15:29
 * @LastEditors: wangjianwhy wangjianwhy@sina.com
 * @LastEditTime: 2024-11-09 17:46:17
 * @FilePath: \my-vue3-appg:\vscode-work\tlo-shopping\src\views\mall\SignIn.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--签到页面-->
<template>
    <!--头部地址或编辑-->
    <div :class="{'sign-head': true, 'background-color-orangered': isHeaderHidden, 'background-color-white': !isHeaderHidden, 'color-white': isHeaderHidden}">
        <div class="sign-background">
            <span :class="{'sign-back': true, }" @click="router.back">❮</span>
            <span class="sign-title">每日签到</span>
            <span class="sign-share" @click="toggleShareMenu">
                <img v-if="isHeaderHidden" src="/src/assets/icons/svg/share-white.svg" />
                <img v-if="!isHeaderHidden" src="/src/assets/icons/svg/share.svg" />
            </span>
        </div>
    </div>

    <!--每日签到和我的红包-->
    <div class="my-sign">
        <span>
            <h3>5</h3>
            <p>我的积分</p>
            <button>兑换</button>
        </span>
        <span>
            <h3>￥5.00</h3>
            <p>我的红包</p>
            <button @click="getCash">提现</button>
        </span>
    </div>

    <!--签到提醒与推荐-->
    <div class="sign-remind">
        <div class="sign-tomorrow">
            <label>
                明天签到
                <font class="color-orangered">+1</font>
                积分
            </label>
            <span>
                签到提醒
                <el-switch v-model="signRemind" style="--el-switch-on-color: orangered;" size="small"/>
            </span>
        </div>
        <div class="continuous-title">← 已连续签到2天 →</div>
        <div class="continuous-sign">
            <span :class="{'background-color-eeeeee': sd.isSign, 'background-color-sign': !sd.isSign, 'color-666666': sd.isSign}" v-for="(sd, index) in signData" :key="index" @click="sign(sd)">
                <label :class="{'color-ccccc': sd.isSign, 'color-orangered': !sd.isSign}">{{ sd.isSign ? '已签' : '+' + sd.getScope }}</label>
                <label class="sign-icon">{{ sd.isSign ? '♥' : '❃' }}</label>
                <label :class="{'color-ccccc': sd.isSign, 'color-orangered': !sd.isSign}">第{{ sd.days }}天</label>
            </span>
        </div>
    </div>

    <!--推荐任务-->
    <div class="sign-task">
        <div class="task-head">
            <span class="task-recommend">推荐任务</span>
            <span class="task-more" @click="moreTask">更多 »</span>
        </div>
        <div class="task-card">
            <div>
                <span class="card-name">
                    <label>邀请家人</label>
                    <label style="font-size: 12px;"><font class="color-ff9900">+10成长值</font> (<font class="color-ff9900">0</font>/1)</label>
                </span>
                <span class="to-finish">
                    <button>去完成</button>
                </span>
            </div>
            <el-divider border-style="margin: 0px;" />
            <div>
                <span class="card-name">
                    <label>查看保修卡</label>
                    <label style="font-size: 12px;"><font class="color-ff9900">+10成长值</font> (<font class="color-ff9900">0</font>/1)</label>
                </span>
                <span class="to-finish">
                    <button>去完成</button>
                </span>
            </div>
            <el-divider />
            <div>
                <span class="card-name">
                    <label>绑定任意智慧家电</label>
                    <label style="font-size: 12px;"><font class="color-ff9900">+10成长值</font> (<font class="color-ff9900">0</font>/1)</label>
                </span>
                <span class="to-finish">
                    <button>去完成</button>
                </span>
            </div>
            <el-divider />
            <div>
                <span class="card-name">
                    <label>控制智能家电</label>
                    <label style="font-size: 12px;"><font class="color-ff9900">+10成长值</font> (<font class="color-ff9900">0</font>/1)</label>
                </span>
                <span class="to-finish">
                    <button>去完成</button>
                </span>
            </div>
        </div>
    </div>

    <!--积分兑换-->
    <div class="integral-gift">
        <div class="task-head">
            <span class="task-recommend">积分兑换</span>
            <span class="task-more" @click="moreTask">更多 »</span>
        </div>
        <div class="scroll-container" ref="scrollContainer">
            <div class="item" v-for="(product, index) in products" :key="index">
                <span><img :src="product.imgurl" /></span>
                <span class="shop-title">{{ truncateText(product.name, 6) }}</span>
                <span class="jifen">{{ product.scope }}积分</span>
            </div>
          </div>
    </div>

    <ShareFrame :isShareMenuVisible="isShareMenuVisible" />
</template>

<script setup>
import { useRouter } from 'vue-router';
import { onMounted, ref, onBeforeUnmount } from 'vue';
import { ElMessageBox } from 'element-plus';
import { truncateText } from '@/components/util/tools.js';
import ShareFrame from '@/components/ShareFrame.vue';

const router = useRouter();

const scrollContainer = ref(null);

onMounted(() => {

    // 鼠标滑动事件
    window.addEventListener('scroll', handleScroll);
    // 关闭分享
    window.addEventListener('click', closeShare);

    // 积分兑换的商品滚动
    const container = scrollContainer.value;
    let scrollAmount = 0;

    // 定时器实现滚动效果
    setInterval(() => {
        scrollAmount += 1;
        if (scrollAmount >= container.scrollWidth / 2) {
        scrollAmount = 0; // 使滚动循环回到起始位置
        }
        container.scrollLeft = scrollAmount;
    }, 20); // 通过调整这个值控制滚动速度
});

const isHeaderHidden = ref(true);

const handleScroll = () => {
    const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
    if (currentScrollTop > 50) {
        isHeaderHidden.value = false;
    } else if (currentScrollTop < 10) {
        isHeaderHidden.value = true;
    }
}

// 分享
const isShareMenuVisible = ref(false);
const toggleShareMenu = () => {
    isShareMenuVisible.value = true;
};
// 关闭分享弹窗
onBeforeUnmount(() => {
  window.removeEventListener('scroll', handleScroll);
});
//  关闭分享的弹窗
const closeShare = (event) => {
    if (isShareMenuVisible.value) {
        const className = event.target.className;
        if (className === 'share-qr-code' || className === 'share-icon' || className === 'close-share') {
            isShareMenuVisible.value = false;
        }
    }
}

const signRemind = ref(false);

const signData = ref([
    {
        isSign: true,
        days: 1,
        getScope: 1
    },
    {
        isSign: true,
        days: 2,
        getScope: 2
    },
    {
        isSign: false,
        days: 3,
        getScope: 2
    },
    {
        isSign: false,
        days: 4,
        getScope: 2
    },
    {
        isSign: false,
        days: 5,
        getScope: 3
    },
    {
        isSign: false,
        days: 6,
        getScope: 4
    },{
        isSign: false,
        days: 7,
        getScope: 10
    }
]);

const sign = (data) => {
    // 只有未签到才能签到
    if (!data.isSign) {
        ElMessageBox.alert("签到成功", {
            confirmButtonText: 'OK',
        });
        data.isSign = true;
    }
}

const getCash = () => {
    ElMessageBox.alert("想提现？门都没有", {
        confirmButtonText: 'OK',
    });
}

const moreTask = () => {
    ElMessageBox.alert('这是更多任务', '任务', {
        confirmButtonText: 'OK',
    });
}

const products = ref([
  { name: 'Haier/海尔高级冰箱双开门速冻，母婴级 1', imgurl: '/src/assets/lunbo/image3.jpeg', scope: '34212', shopId: 1 },
  { name: '商品 2', imgurl: '/src/assets/lunbo/image3.jpeg', scope: '34212', shopId: 2 },
  { name: '商品 3', imgurl: '/src/assets/lunbo/image3.jpeg', scope: '342342', shopId: 3 },
  { name: '商品 4', imgurl: '/src/assets/lunbo/image3.jpeg', scope: '342342', shopId: 4 },
  { name: '商品 5', imgurl: '/src/assets/lunbo/image3.jpeg', scope: '65632', shopId: 5 }
]);

</script>

<style scoped>
/*头部横条*/
.sign-head {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 45px;
    width: 100%;
}
.sign-head .sign-background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 10px;
    width: 95%;
    height: 45px;
    margin: auto;
}
.sign-background .sign-back {
    width: 20px;
    font-size: 16px;
    float: left;
    font-weight: bold;
    cursor: pointer;
}
.sign-background .sign-title {
    font-size: 18px;
    font-weight: bold;
}
.sign-background .sign-share {
    float: right;
    flex: 1;
    width: 30px;
    cursor: pointer;
}
.sign-background .sign-share img {
    width: 20px;
    height: 20px;
}

/*我的签到*/
.my-sign {
    width: 100%;
    height: 230px;
    display: flex;
    margin-top: 40px;
    z-index: 1;
    background-color: orangered;
}
.my-sign span {
    flex: 1;
    color: white;
}
.my-sign span p {
    font-size: 12px;
}
.my-sign span button {
    display: flex;
    margin: auto;
    color: red;
    border-radius: 35px;
    padding: 2px 10px;
    font-size: 13px;
    background: orange;
}

/*签到提醒与推荐*/
.sign-remind {
    width: 95%;
    margin: auto;
    margin-top: -100px;
    height: 165px;
    z-index: 2;
    background-color: white;
    border-radius: 10px;
}
.sign-remind .sign-tomorrow {
    display: flex;
    padding: 10px 0px;
}
.sign-tomorrow label {
    flex: 1;
    font-size: 18px;
    font-weight: bolder;
}
.sign-tomorrow span {
    flex: 1;
}

.continuous-title {
    font-size: 16px;
    font-weight: bold;
}
.continuous-sign {
    height: 80px;
    display: flex;
    font-size: 13px;
    cursor: pointer;
}
.continuous-sign span {
    flex: 1;
    border-radius: 5px;
    margin: 3px;
    padding: 3px;
}
.background-color-sign {
    background-color: #fce5cd;
    cursor: pointer;
}
.background-color-eeeeee {
    background-color: #eeeeee;
}
.continuous-sign span label {
    display: flex;
    flex-direction: column;
}
.sign-icon {
    font-size: 20px;
    color: orange;
}

/*推荐任务*/
.sign-task {
    width: 95%;
    margin: auto;
    height: auto;
    margin-top: 10px;
    background-color: white;
    border-radius: 10px;
}
.task-head {
    width: 95%;
    height: auto;
    display: flex;
    margin: 10px;
    padding-top: 10px;
}
.task-recommend {
    font-weight: bold;
    flex: 1 0;
    text-align: left;
}
.task-more {
    cursor: pointer;
    font-size: 14px;
}

/*任务卡*/
.sign-task .task-card {
    height: auto;
    width: 90%;
    margin: auto;
}
.task-card div {
    font-size: 14px;
    display: flex;
    margin: auto;
}
.task-card div span {
    margin: 10px 0px;
}
.task-card div .card-name {
    flex: 1 0;
    text-align: left;
    height: 100%;
}
.task-card div .to-finish {
    text-align: right;
    margin: auto;
}
.card-name label {
    display: block;
}
.to-finish button {
    padding: 0px;
    background-color: #fce5cd;
    color: orangered;
    padding: 2px 5px;
    border-radius: 30px;
    flex: 1;
}

/*积分兑好礼*/
.integral-gift {
    width: 95%;
    margin: 10px auto;
    background-color: white;
    border-radius: 10px;
    padding-bottom: 10px;
}
.scroll-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.item {
    min-width: 130px;
    height: 100%;
    display: inline-block;
    background-color: white;
    box-sizing: border-box;
    text-align: center;
    
}
.item span {
    display: block;
}
.item span img {
    width: 100px;
    height: 100px;
}
.shop-title {
    font-size: 14px;
}
.jifen {
    font-size: 12px;
    color: #ff9900;
}

/* 使 item 从右向左排列，并循环滚动 */
.scroll-container::after {
    content: '';
    display: inline-block;
    width: 100%; /* 宽度充满滚动容器 */
}
</style>